<template>
    <div>
        <div class="menuDescriptionBox">
            <i class="fa fa-question-circle-o fa-lg"></i> <span class="menuDescTitle">菜单功能说明：</span>
            <div class="menuDesc">该菜单主要为用户的应用创建使用的网络范围，用户注册后，在此处可以创建一个自身的网络使用范围，后期用户所创建的应用都将处于该网络范围段，以保证用户各个应用之间也可以进行互通，形成以用户为中心的用户网络沙盒，防止其他用户对自己的应用进行非法的网络访问操作</div>
        </div>
        <el-button type="primary" style="float:left" @click="autoAddNetwork">自动生成网络使用范围</el-button>
        <div class="autoNetwork">我们将自动为您分配网络使用范围，如需创建应用，需要您先在此处生成您的网络</div>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {
                rules : {
                    
                }
            }
        },
        //初始化函数
        mounted() {

        },
        //计算属性
        computed: {
            ...mapState({ 
                form  : state => state.AddNetworkModule.form
            })
        },
        //组件方法
        methods: {
            autoAddNetwork(){

                var params = {
                    userid   : this.$localData.getUserId(),
                    username : this.$localData.getUserName()
                }

                this.$myPop.confirmBox("确认操作","确定要创建网络吗？",()=>{

                    this.$myLoading.startLoading()
                    this.$http.postHttp(
                        this.$API.dockerCreateNetwork,
                        params,
                        rs => {
                            this.$myLoading.endLoading()
                            this.$myPop.alertBox("成功提示","已成功为您创建网络，现在可以开始创建应用");
                        }
                    )

                })
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.autoNetwork {
    float left
    position relative
    top 24px
    color #666
    left 10px
}
</style>